<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="../css/swiper.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />   
    <style>
    	.scroll {height:30px;width:60%;max-width:640px;overflow:hidden;color: #000000;display:inline-block;position: relative;position: absolute;left: 120px;top:6px;}
		.scroll ul {width:100%;position:absolute;left:0;top:0;}
		.scroll li {height:30px;line-height:30px;}
        .scroll li a{display: block;color: #666666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;}
        .swiper-wrapper img{height: 150px!important;}	
        .searchlist{overflow: hidden;}
        .searchlist li{float: left;width: 25%;color: #ff7e00;text-align: center;font-size: 14px;}
        .searchlist-active{border-bottom: 2px solid #ff7e00;} 
        #search-btn{position: absolute;right: 0px;bottom: 5px;background: transparent;color:#fff;border: none;}
    </style>
    <script type="text/javascript" src="../js/swiper.min.js" ></script>
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
    <script type="text/javascript" src="../js/common.js" ></script>
    <script type="text/javascript" src="../js/session.js" ></script>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<!--首页-->
		<div id="container"></div>
	    <div id="tabbar" class="mui-control-content mui-active">
	    	<header class="mui-bar mui-bar-nav header" id="app">
			    <div class="ditu-icon mui-icon mui-icon-arrowthinleft mui-action-back" style="color: #fff;font-size: 24px;"></div>
			    <div class="address-text" style="overflow: hidden;"></div>
			    <div class=" mui-search search-input">
					<input id="search" type="search"v-model="value"  class=" mui-input-clear mui-icon-search" placeholder="搜索">
					<button id="search-btn" v-show='show'>搜索</button>
				</div>
			</header>
			<div style="height: 50px;"></div>
			<div>
				<h1 style="font-size: 14px;color: #666666; text-align: center;font-weight: normal;line-height: 50px;">
					搜索指定内容
				</h1>
				<ul class="searchlist">
					<li class="searchlist-active" data-type="1">居家养老</li>
					<li data-type="2">在线商品</li>
					<li data-type="3">在线商店</li>
					<li data-type="4">热点新闻</li>
				</ul>
			</div>
			
			
	<script>
		var type="1"//搜索类型
		//控制搜索按钮是否出现
		var app=new Vue({
			el:'#app',
			data:{
				value:'',
				show:false
			},
			watch:{
				'value':function(){
					if(this.value!=null&&this.value!=''){
						this.show=true;
					}else{
						this.show=false;
					}
				}
			}
		})
		mui(".searchlist").on("tap","li",function(){
			type=$(this).attr("data-type");
			$(this).addClass("searchlist-active").siblings("li").removeClass("searchlist-active")
		})
		mui(".header").on("tap","#search-btn",function(){
			var  searchinfo=$("#search").val();
			if(searchinfo!=null&&searchinfo!=""){
				searchinfo = encodeURI(encodeURI(searchinfo));
				if(type=="1"){
				     mui.openWindow({url:"../yanglao/index.html?searchinfo="+searchinfo})
				}else if(type=="2"){
					 mui.openWindow({url:"../shopping/search_sp.html?searchinfo="+searchinfo})
				}else if(type=="3"){
					mui.openWindow({url:"../shopping/index.html?searchinfo="+searchinfo})
				}else if(type=="4"){
					mui.openWindow({url:"rendian-list.html?searchinfo="+searchinfo})
				}
			}
		})
		
	</script>	
</body>
</html>